<template>
  <view
    class="image-container relative"
    @click="junpDetail"
    @longpress="press"
    @touchend="cancel"
  >
    <image class="flex1" mode="aspectFill" :lazy-load="true" :src="imgUrl"></image>
    <view class="absolute icon-top-right">
      <u-icon
        v-if="isVideo"
        :name="globalIcon.videoIcon"
        size="23"
        style="z-index: 10"
      ></u-icon>
      <view
        v-if="ismutil"
        class="relative br-20 w bg-white"
        style="z-index: 10"
      >
        <view class="absolute br-10 w bg-white mutil-image"></view>
      </view>
    </view>
  </view>
</template>

<script>
import Config from "@/common/config.js";
export default {
  name: "home-list",
  props: {
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
    itemId: String | Number,
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    isUser: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isClick: false,
      touchTime: "",
      id: null,
      diffY: 0,
      curryY: 0,
    };
  },
  methods: {
    press(event) {
      this.$emit("showMask", {
        id: this.itemId,
        showMask: true,
      });
    },
    cancel(event) {
      this.$emit("showMask", {
        showMask: false,
      });
    },
    junpDetail() {
      uni.navigateTo({
        url: `/subA/detail/detail?edgeId=${this.config.shortcode}&shortCode=${this.config.edge_id}&isUser=${this.isUser}&origin=home`,
      });
    },
    hideMask(event) {
      let times = +new Date();
      let diffTimes = times - this.touchTime;
      this.curryY = 0;
      if (diffTimes < 350) {
        clearTimeout(this.id);
        this.junpDetail();
      } else {
        this.$emit("showMask", {
          showMask: false,
        });
        let context = this.$store.getters.getVideoContext;
        context !== "" && context.stop();
      }
    },
    move(event) {
      let diffY = this.curryY - event.touches[0].pageY;
      console.log(diffY, event.touches[0].pageY);
      this.diffY = diffY;
      uni.pageScrollTo({
        scrollTop: event.touches[0].pageY,
        duration: 300,
      });
    },
  },
  computed: {
    imgUrl() {
		// console.log(this.config,Config.static_url + 'ins_img/' + this.config.shortcode + ".jpg")
      return this.isUser
        ? this.config.display_url
        : Config.static_url + 'ins_img/' + this.config.shortcode + ".jpg";
    },
    isVideo() {
      let video = this.config?.is_video ?? "0";
      return video == "1";
    },
    content() {
      return this.config?.edge_media_to_caption ?? "";
    },
    childrens() {
      let children = this.config.edge_sidecar_to_children?.split(";");
	  if (!children){
		  return []
	  }
      return children.map((item) => {
        if (item.length > 2) {
          return Config.static_url + item + ".jpg";
        }
      });
    },
    ismutil() {
		let children
		try{
		    children = this.config.edge_sidecar_to_children?.split(";") ?? [];
		}catch{
			return false;
		}
      return children.length === 1 ? false : true;
    },
    taken_at() {
      return this.config?.taken_at_timestamp ?? "未知时间";
    },
    comment() {
      return this.config?.edge_media_to_comment ?? 0;
    },
    like() {
      return this.config?.edge_liked_by ?? 0;
    },
    caption() {
      return this.config?.accessibility_caption ?? "";
    },
  },
};
</script>

<style lang="scss" scoped>
.image-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 4rpx;
  display: flex;

  image {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.icon-top-right {
  right: 10rpx;
  top: 13rpx;
}

.w {
  width: 30rpx;
  height: 30rpx;
}

.mutil-image {
  transform: translate(-25%, -25%);
  box-shadow: 5rpx 5rpx #424242;
}
</style>
